<template>
  <div class="mode-of-payment-wrap">
    <van-nav-bar title="支付方式" left-arrow @click-left="onClickLeft" />
    <ul>
      <li class="infomain wrap" v-for="(item,index) in list" :key="index">
        <img :src="item.url" alt />
        <p>{{item.title}}</p>
        <img :src="yinlian" alt v-if="index==2" class="yinlian" />
      </li>
    </ul>
  </div>
</template>
<script>
import weixin from "@/assets/image/微信.png";
import zhifubao from "@/assets/image/支付宝.png";
import jianhang from "@/assets/image/建行.png";
import yunshanfu from "@/assets/image/云闪付.png";
import yinlian from "@/assets/image/银联.png";

export default {
  data() {
    return {
      yinlian: yinlian,
      list: [
        {
          title: "微信",
          url: weixin,
        },
        {
          title: "支付宝",
          url: zhifubao,
        },
        {
          title: "云闪付",
          url: yunshanfu,
        },
        {
          title: "建行龙支付",
          url: jianhang,
        },
      ],
    };
  },
  methods: {
      onClickLeft(){
          this.$router.go(-1)
      }
  },
};
</script>
<style lang="stylus" >
.mode-of-payment-wrap {
  height: 100vh;
  background: #f4f4f4;

  .van-nav-bar .van-icon {
    color: #4E4E4E;
    height: 17px;
    width: 17px;
  }

  .van-nav-bar__title {
    font-size: 18px;
    color: #494949;
  }

  .infomain {
    height: 57px;
    position: relative;

    &::after {
      content: '';
      height: 1px;
      width: 344px;
      position: absolute;
      left: 14px;
      bottom: -1px;
      background: #f4f4f4;
      z-index 20
    }
  }

  ul {
    margin-top: 10px;
  }

  .wrap {
    width: 100%;
    padding: 0 22px 0 21px;
    display: flex;
    align-items: center;
    background: #fff;

    p {
      font-size: 16px;
      color: #2E2E2E;
      margin-left 10px
    }
    img:nth-child(1){
        height 18px
        width 21px
    }
    img:nth-child(2){
        height 21px
        width 23px
    }
    img:nth-child(3){
        height 23px
        width 26px
    }
    img:nth-child(4){
        height 23px
        width 23px
    }
    .yinlian{
        height 23px
        width 36px
        margin-left 10px
    }
  }
}
</style>